<template>
    <div class="app-container">
        <mt-header fixed title="固定在顶部"></mt-header>
				
				<transition mode="out-in">
					<router-view class="con"></router-view>
				</transition>

        <nav class="mui-bar mui-bar-tab">
					<router-link class="mui-tab-item" to="/Home">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</router-link>
					<router-link class="mui-tab-item" to="/Member">
						<span class="mui-icon mui-icon-contact"></span>
						<span class="mui-tab-label">会员</span>
					</router-link>
					<router-link class="mui-tab-item" to="/Cart">
						<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
						<span class="mui-tab-label">购物车</span>
					</router-link>
					<router-link class="mui-tab-item" to="/Search">
						<span class="mui-icon mui-icon-search"></span>
						<span class="mui-tab-label">搜索</span>
					</router-link>
				</nav>
    </div>
</template>
<script>

export default {
  data: function() {
    return {};
  },
  methods: {
      
  }
};
</script>
<style soped>
	.app-container{
		padding: 40px 0 50px;
		height: 100%;
	}
	.con{
		height: 100%;
	}

	.v-enter,.v-leave-to{
		opacity: 0;
	}
	.v-enter-active,.v-leave-active{
		transition: all ease .4s
	}
</style>